<template>
	<view class="uni_box">
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="immerse"></view> -->
		<!-- #endif -->
		<view class="newcontent">
			<!-- :src="headinfo.image" -->
			<view class="moneview" :style="{
			background:headinfo.image
		}">
				<view class="moneitem" @click="getlogin">
					<image :src="info.avatar" class="tous" mode=""></image>
					<text class="name txt">{{info.nickname}}</text>
					<!-- <u-icon class="mricon" name="arrow-right" color="#fff" size="32"></u-icon> -->
				</view>
			</view>
			<view class="mtwoview">

				<view class="mtwoitem">
					<view class="mtone">
						<text class="kename">客服热线：{{info.kefu_mobile}}</text>
						<view class="ban" @click="getqun(info.teacher)">专属班主任</view>
					</view>
					<view class="mtwo">
						<text class="xia">下载<text class="xiaapp">融跃教育APP</text>享更多权益</text>
					</view>
				</view>
			</view>

			<view class="mlist" v-for="(item,index) in menuinfo" :key="index">
				<view class="mitem">
					<text class="mtname">{{item.title}}</text>
					<view class="mitems">
						<view class="mnav" v-for="(i,ind) in item.list" :key="ind" @click="getmine(i)">
							<image :src="i.image" class="moneicon" mode=""></image>
							<text class="name">{{i.name}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="mlist">
				<view class="mitem">
					<text class="mtname">学习中心</text>
					<view class="mitems">
						<view class="mnav" v-for="(item,index) in monelist" :key="index" @click="navClick(item)">
							<image :src="item.img" class="moneicon" mode=""></image>
							<text class="name">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="mlist">
				<view class="mitem">
					<text class="mtname">个人中心</text>
					<view class="mitems">
						<view class="mnav" v-for="(item,index) in mtwolist" :key="index" @click="navClick(item)">
							<image :src="item.img" class="moneicon" mode=""></image>
							<text class="name">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="mlist">
				<view class="mitem">
					<text class="mtname">帮助中心</text>
					<view class="mitems">
						<view class="mnav" v-for="(item,index) in mthreelist" :key="index" @click="navClick(item)">
							<image :src="item.img" class="moneicon" mode=""></image>
							<text class="name">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 底部导航 -->
		<Tabbar :current="4"></Tabbar>

		<!-- 专属班主任弹窗 -->
		<view class="st">
			<u-popup v-model="stshow" mode="center" @close="stshow=false" width="80%" :closeable="true">
				<view class="stpop">
					<!-- <view class="chaview">
						<image class="macha" src="@/pages_subject/static/img/macha.png" mode="" />
					</view> -->
					<image class="mapop" mode="" :src="taninfo.image" />
					<!-- <text class="matit">注：{{taninfo.title}}</text> -->
				</view>
			</u-popup>
		</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			monelist:[
				{id:1,name:'我的课程',img:'/static/mine/mone.png'},
				{id:2,name:'我的直播',img:'/static/mine/mtwo.png'},
				{id:3,name:'观看记录',img:'/static/mine/mthree.png'},
				{id:4,name:'我的收藏',img:'/static/mine/mfour.png'},
				{id:5,name:'答疑中心',img:'/static/mine/mfive.png'},
				{id:6,name:'我的答疑',img:'/static/mine/msix.png'},
				{id:7,name:'资料下载',img:'/static/mine/mseven.png'},
			],
			mtwolist:[
				{id:8,name:'购物车',img:'/static/mine/mtone.png'},
				{id:9,name:'我的订单',img:'/static/mine/mttwo.png'},
				{id:10,name:'优惠券',img:'/static/mine/mtthree.png'},
				{id:11,name:'考试报名',img:'/static/mine/mtfour.png'}
			],
			mthreelist:[
				{id:12,name:'在线客服',img:'/static/mine/mrone.png'},
				{id:13,name:'在线答疑',img:'/static/mine/mrtwo.png'},
				{id:14,name:'关于融跃',img:'/static/mine/mrthree.png'},
				{id:15,name:'退出登录',img:'/static/mine/mrfour.png'}
			],
			headinfo:{
				image:''
			},
			info:{},
			taninfo:{
				image:''
			},
			stshow:false,
			menuinfo:[]
		}
	},
	components: {
	},
	computed: {
	},

	mounted() {

	},
	async onLoad() {
		uni.setStorageSync('shopId', '1')
		this.getinit()
	},
	async onShow() {

	},
	onReachBottom: function () {
	},
	methods: {
		getinit(){
			this.getheadbg();
			this.getuserinfo();//个人信息
			this.getminegetMenu();//菜单组件
		},
		async getheadbg(){
			let res = await this.$u.api.getBannermine({
				mark:'h5-user'
			});
			this.headinfo = res[0]
		},
		async getuserinfo(){
			let res = await this.$u.api.minegetData({
			});
			this.info = res
		},
		async getminegetMenu(){
			let res = await this.$u.api.minegetMenu({
			});
			this.menuinfo = res
		},
		navClick(item){
			let id = item.id
			if(id == 1){
				//我的课程
				this.navrouter("/pages_subject/twoPage/StudPage/MyKeCheng");
			}else if(id == 2){
				// 我的直播
				this.navrouter("/pages_subject/twoPage/MinePage/MyZhibo");
			}else if(id == 3){
				//观看记录
				this.navrouter("/pages_subject/twoPage/MinePage/GuanRecord");
			}else if(id == 4){
				//我的收藏
				this.navrouter("/pages_subject/twoPage/MinePage/MyCollection");
			}else if(id == 5){
				//答疑中心
				this.navrouter("/pages_subject/twoPage/MinePage/DayiList");
			}else if(id == 6){
				//我的答疑
				this.navrouter("/pages_subject/twoPage/MinePage/MyTiwen");
			}else if(id == 7){
				//资料下载
				this.navrouter("/pages_subject/twoPage/MinePage/ZiliaoDown");
			}else if(id == 8){
				//购物车
				this.navrouter("/pages_subject/twoPage/MinePage/Cart");
			}else if(id == 9){
				//我的订单
				this.navrouter("/pages_subject/twoPage/MinePage/Order");
			}else if(id == 10){
				//优惠券
				this.navrouter("/pages_subject/twoPage/MinePage/Coupon");
			}else if(id == 11){
				//考试报名
				this.navrouter("/pages_subject/twoPage/TiPage/TiHome");
			}else if(id == 12){
				//在线客服
				this.navrouter("/pages_subject/twoPage/ZhikePage/XueJihua");
			}else if(id == 13){
				
			}else if(id == 14){
				
			}else if(id == 15){
				//退出登陆
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定退出登录？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					// showCancel: false, // 是否显示取消按钮，默认为 true
					// confirmColor: '#f55850',
					// cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) {  
						uni.clearStorageSync();
						that.$store.commit('outLogin');
						that.$u.toast('退出成功');
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}, 1000);
					} else {  
						console.log('cancel') //点击取消之后执行的代码
						}  
					} 
				})

			}
		},
		getlogin(){
			// this.navrouter("/pages_subject/twoPage/ZhikePage/XueJihua");
		},
		getqun(image){
			this.taninfo.image = image
			this.stshow = true
		},
		getmine(item){
			// console.log(item)
			if(item.name == '退出登录'){
				//退出登陆
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定退出登录？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					// showCancel: false, // 是否显示取消按钮，默认为 true
					// confirmColor: '#f55850',
					// cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) {  
						uni.clearStorageSync();
						that.$store.commit('outLogin');
						that.$u.toast('退出成功');
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}, 1000);
					} else {  
						console.log('cancel') //点击取消之后执行的代码
						}  
					} 
				})
			}else{
				this.toPage(item)
			}
			
		}
	}
}
</script>

<style lang="scss" scoped>

.newcontent {
	min-height: 100vh;
	// padding-bottom: 30rpx;
	background-color: rgba(243, 245, 250,1);
	padding-bottom: 120rpx;
	.moneview{
		height: 320rpx;
		background-size: 100% 100%;
		background: linear-gradient(0deg, #FA4E4E, #FD894F);
		position: relative;
		.moneitem{
			position: relative;
			height: 80%;
			display: flex;
			align-items: center;
			padding: 0 45rpx;
			.tous{
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				border: 4rpx solid #fff;
				margin-right: 30rpx;
			}
			.name{
				font-family: PingFangSC;
				font-weight: bold;
				font-size: 38rpx;
				color: #FFFFFF;
				display: inline-block;
				max-width: 80%;
			}
			.mricon{
				margin-left: auto;
			}

		}
	}
	.mtwoview{
		height: 174rpx;
		position: relative;
		margin: -70rpx 40rpx 30rpx;
		background: linear-gradient(90deg, #FCD99B, #FEEAC5);
		border-radius: 20rpx;
		border: 1px solid #FFF9EF;
		.mtwoitem{
			position: relative;
			width: 100%;
			height: 100%;
			padding: 13px 15px;
			display: flex;
			flex-direction: column;
			.mtone{
				display: flex;
				flex-direction: row;
				align-items: center;
				.kename{
					font-weight: 500;
					font-size: 24rpx;
					color: #9E6B2E;
				}
				.ban{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #FFFFFF;
					padding: 13rpx 20rpx;
					background: #D7933E;
					border-radius: 50rpx;
					margin-left: auto;

				}
			}
			.mtwo{
				display: flex;
				margin-top: auto;
				justify-content: center;
				align-items: center;
				.xia{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #9E6B2E;
					.xiaapp{
						color: #FA4E4E;
					}
				}
			}
		}
	}
	.mlist{
		
		.mitem{
			margin: 30rpx 40rpx 0;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx 30rpx 10rpx;
			.mtname{
				font-family: PingFangSC;
				font-weight: bold;
				font-size: 28rpx;
				color: #111111;
				display: block;
				margin-bottom: 30rpx;
			}
			.mitems{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.mnav{
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 25rpx;
					.moneicon{
						width: 64rpx;
						height: 64rpx;
						margin-bottom: 15rpx;
					}
					.name{
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #555555;
					}
				}
			}
		}
	}
}


.st{
	/deep/.u-mode-center-box{
		background-color: transparent;
	}
.stpop{
	background-color: #fff;
	height: 550rpx;
	background: #FFFFFF;
	border-radius: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	.mapop{
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 50rpx;
	}
	.matit{
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #FA7938;
	}
	.chaview{
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		width: 40rpx;
		height: 40rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(202,205,217,0.4);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		// position: relative;
		.macha{
			width: 30rpx;
			height: 30rpx;
		}
	}
}
}
</style>
